import { Flex, Splitter, Typography } from 'antd';
import React from 'react';

interface Props {
  text?: string | number;
}
// eslint-disable-next-line react/function-component-definition
const Desc: React.FC<Readonly<{ text: any }>> = ({ text }: Props) => (
  <Flex justify="start" align="start" style={{ height: '100%' }}>
    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
      {text}
    </Typography.Title>
  </Flex>
);
interface IndexProps {
  left: any;
  tree: any;
}
export default function IndexComponent({ left, tree }: IndexProps) {
  const size = ['80%', '20%'];
  const [sizes, setSizes] = React.useState<(number | string)[]>(size);
  return (
    <Flex vertical gap="middle">
      <Splitter
        layout="horizontal"
        onResize={setSizes}
        style={{ height: 500, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
      >
        <Splitter.Panel size={sizes[0]} resizable={false}>
          <Desc text={tree} />
        </Splitter.Panel>
        <Splitter.Panel size={sizes[1]}>
          <Desc text={left} />
        </Splitter.Panel>
      </Splitter>
    </Flex>
  );
}
